<template>
	<view class="container">
		 <view class="status_bar">
		            <!-- 这里是状态栏 -->
		        </view>
	    <view class="status_title">
	    	<view class="status_left">
				<image  src="@/static/images/Left.png" mode="widthFix" @click="back"></image>
				<view class="left-font">邮件</view>
			</view>
	    	<view  class="status_right" @click="addemail">
				<image class="right-images" src="@/static/mail-add.png" ></image>
				<view class="right-font">添加邮件</view>
			</view>
	    </view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#007aff"></uni-segmented-control>
		        <view class="content" >
		            <view v-show="current === 0">
							<uni-search-bar class="uni-mt-10" radius="5" placeholder="搜索标题" clearButton="auto" cancelButton="none" @confirm="search" />
							
							  <view v-for="(item,index) in cardData" :key="index">
							  	     <uni-wcard :title="item"></uni-wcard>
							  </view>
										<uni-card title="李云东"  extra="额外信息" :thumbnail="avatar" @click="onClick">
			                          <text class="uni-body">2023-01-01 12:11:22</text>
			                          
										<view class="uni-body">2023-01-01 12:11:22</view>
										</uni-card>
							<uni-section  type="line" >
										<uni-card title="XX文电处-刘云"  extra="额外信息" :thumbnail="avatar" @click="onClick">
													<text class="uni-body">2023-01-01 12:11:22</text>
										</uni-card>
							</uni-section>
							<uni-section  type="line" >
										<uni-card title="张德龙"  extra="额外信息" :thumbnail="avatar" @click="onClick">
													<text class="uni-body">2023-01-01 12:11:22</text>
										</uni-card>
							</uni-section>
							<uni-section  type="line" >
										<uni-card title="赵盾"  extra="额外信息" :thumbnail="avatar" @click="onClick">
											<text class="uni-body">2023-01-01 12:11:22</text>
										</uni-card>
									</uni-section>

		            </view>
		            <view v-show="current === 1">
						<uni-search-bar class="uni-mt-10" radius="5" placeholder="搜索标题" clearButton="auto" cancelButton="none" @confirm="search" />
		               <uni-section type="line" >
		               			<uni-card title="刘望"  extra="额外信息" :thumbnail="avatar" @click="onClick">
		               				<text class="uni-body">2023-01-01 12:11:22</text>
		               			</uni-card>
		               </uni-section>
					   <uni-section type="line" >
					   			<uni-card title="李芸芸"  extra="额外信息" :thumbnail="avatar" @click="onClick">
					   				<text class="uni-body">2023-01-01 12:11:22</text>
					   			</uni-card>
					   </uni-section>
					   <uni-section type="line" >
					   			<uni-card title="管涵"  extra="额外信息" :thumbnail="avatar" @click="onClick">
					   				<text class="uni-body">2023-01-01 12:11:22</text>
					   			</uni-card>
					   </uni-section>
					   <uni-section type="line" >
					   			<uni-card title="王家林"  extra="额外信息" :thumbnail="avatar" @click="onClick">
					   				<text class="uni-body">2023-01-01 12:11:22</text>
					   			</uni-card>
					   </uni-section>
		            </view>
		        </view>
			
	</view>
</template>
<script>
export default {
  data() {
    return {
		avatar:"https://ts1.cn.mm.bing.net/th/id/R-C.2d2396cc0b50e0d5ef688ef22efb1a9f?rik=zQQLhTXDC38MLw&riu=http%3a%2f%2ficon.chrafz.com%2fuploads%2fallimg%2f160421%2f1-1604211553000-L.png&ehk=BASAQWjYU9WRGqlg0wVo2K8MQeS5gRExs3Z94hDMNPI%3d&risl=&pid=ImgRaw&r=0",
        items: ['已收邮件', '已发邮件'],
        current: 0,
		cardData:[
			{name:'谢浩',texts:"xxxx单位2022年中秋节排班安排",date:'2020-11-34'},
			{name:'刘云',texts:"兑现2020年xxx金融中心产业的通知",date:'2020-11-34'},
			{name:'张德龙',texts:"外出签报单",date:'2020-11-34'},
			{name:'赵盾',texts:"外出签报单-XXX单位",date:'2020-11-34'},
		]
    };
  },
  
  methods: {
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }
	  if (this.styleType !== e.detail.value) {
	  					this.styleType = e.detail.value
	  				}
    },
	addemail(){
		uni.navigateTo({
		    url: '/pages/work/user/addemail',
		  })
	},
	back(){
		  uni.switchTab({
		  				url: '/pages/work/index'
		  			});
	}
  },
};
</script>
<style scoped>
	/deep/.segmented-control{
		height: 92rpx !important;
	}
	/deep/ .segmented-control__text{
		   line-height: 60rpx !important;
	}
	 /deep/ .segmented-control__item{
		  padding: 0px 28rpx !important;
		  background-color: #fff !important;
		  
		  /* border-bottom: 4rpx solid rgba(78, 136, 249, 1) !important; */
		 
	  }
	 /deep/ .segmented-control__item--text{
		  border: none !important;
		   border-bottom: 4rpx solid rgba(78, 136, 249, 1) !important;
		   display: inline-block ;
		   width: 346rpx;
	  }
	/deep/ .uni-searchbar__box{
		    background: #ffffff !important;
		    border-radius: 20rpx !important;
			justify-content: start !important;
	}
	.uni-searchbar{
		padding: 20rpx 28rpx;
	}
	 .status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
			
	    }
	.status_title {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0px 28rpx 0px 40rpx;
		background-color: #FFFFFF;
		background:linear-gradient(139.53deg,#4e88f9 0%,#67a4ff 100%);
	}
	.status_left {
		height: 112rpx;
		display: flex;
		align-items: center;
		
	}
	.left-font{
		padding-left: 56rpx;
		font-size: 36rpx;
		color:#ffffff;
		
	}	
	image{
		width: 32rpx;
		height: 32rpx;
	}
	.status_right {
		display: flex;
		align-items: center;
		
	}
	.right-font{
		font-size: 32rpx;
		color:#ffffff;
	}
	.right-images{
		width: 36rpx;
		height: 36rpx;
		margin: 6rpx 20rpx 0rpx 0rpx;
	}

</style>
